<script setup lang="ts">
import OpSearch from './../../components/OpSearch.vue'
import { ref, computed, watch } from 'vue';
import { fetchSearchData } from './../../api/search';
import type { ISearchResult } from '@/types'
import { useToggle } from './../../hooks/useToggle';
import { useDebounce } from './../../hooks/useDebounce'

interface IEmits {
    (e: 'cancel'): void
}
const emits = defineEmits<IEmits>()

const HISTROY_TAGS = ['披萨', '栗子', '切果NOW', '炒饭', '玉米', '土豆焗饭', '烧烤', '水果']
const [showHistroyTags, toggleHistroyTag] = useToggle(false)
// 通过计算属性来控制展示HISTROY_TAGS的收起和展开
const histroyTags = computed(() => showHistroyTags.value ? HISTROY_TAGS : HISTROY_TAGS.slice(0, 5))

const searchValue = ref('')
const searchResult = ref([]  as ISearchResult[])
const [INIT, DONE, DOING] = [-1, 0, 1] // load状态值：初始，结束，加载中
const searchLoading = ref(INIT)

const onSearch = async (v?: string | number) => {
    try {
        searchLoading.value = DOING
        const { list }= await fetchSearchData(v as string)
        searchLoading.value = DONE
        searchResult.value = list
    } finally {
        searchLoading.value = DONE
    }
}

const onTagClick = (v) => {
    searchValue.value = v
    onSearch(v)
}

// 使用防抖钩子函数写法
const debounceValue = useDebounce(searchValue, 1000)
watch(debounceValue, (nv) => {
    if (!nv) {
        searchResult.value = []
        return
    }
    onSearch(nv as string)
})

// 使用防抖工具类函数写法
// watch(searchValue, debounceUtil((nv) => {
//     if (!nv) {
//         searchResult.value = []
//         return
//     }
//     onSearch(nv as string)
// }, 1000))
</script>

<template>
    <div class="search-view">
        <OpSearch
            show-action
            v-model="searchValue"
            shape="round"
            placeholder="请输入搜索关检词"
            @search="onSearch"
            @cancel="emits('cancel')"
        >
        </OpSearch>
        <!-- 历史搜索记录 -->
        <div v-if="!searchValue" class="search-view__histroy">
            <div class="label">历史搜索</div>
            <TransitionGroup name="list">
                <div class="histroy-tag" v-for="v in histroyTags" :key="v" @click="onTagClick(v)">{{ v }}</div>
                <div class="histroy-tag" key="arrow" @click="toggleHistroyTag">
                    <VanIcon v-if="showHistroyTags" name="arrow-up"></VanIcon>
                    <VanIcon v-else name="arrow-down"></VanIcon>
                </div>
            </TransitionGroup>
        </div>
        <div v-else class="search-view__result">
            <!-- 加载中：后续封装成loading组件 -->
            <div v-if="searchLoading === DOING" class="searching">~loading~</div>
            <template v-else-if="searchLoading === DONE">
                <div class="result-item" v-for="v in searchResult" :key="v.label">
                    <VanIcon name="search"></VanIcon>
                    <div class="name">{{ v.label }}</div>
                    <div class="count">约{{ v.resultCount }}个结果</div>
                </div>
                <div class="no-result" v-if="!searchResult.length">
                    ~暂无推荐~
                </div>
            </template>
        </div>
    </div>
</template>

<style lang="scss">
.search-view {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    z-index: 999;
    &__histroy {
        padding: var(--van-padding-sm);
        .label {
            margin-bottom: var(--van-padding-xs);
        }
        .histroy-tag {
            display: inline-block;
            font-size: 12px;
            border-radius: 10px;
            color: var(--van-gray-6);
            background: var(--van-gray-1);
            padding: 4px 8px;
            margin-right: 10px;
            margin-bottom: var(--van-padding-xs);
        }
    }
    &__result {
        .result-item {
            display: flex;
            align-items: center;
            font-size: 12px;
            padding: 10px;
            border-radius: 1px solid var(--van-gray-1);
            .name {
                flex: 1;
                padding-left: 6px;
            }
            .count {
                font-size: 12px;
                color: var(--van-gray-6);
            }
        }
        .no-result, .searching {
            font-size: 12px;
            text-align: center;
            padding: 100px 0;
            color: var(--van-gray-6);
        }
    }
}
.list-enter-active, .list-leave-active {
    transition: all 1s ease;
}
.list-enter-from, .list-leave-to {
    opacity: 0;
    transform: translateY(30px); // 从下往上淡入
}
</style>